<template>
    <div class="sstbwz" @click="djtzssym"><svg t="1676954382915" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2775" width="20" height="20">
            <path
                d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z"
                p-id="2776"></path>
        </svg></div>
    <div style="margin-bottom: 60px;" class="fxsmss">
        <van-tabs v-model:active="active" animated @change="bhzh">
            <van-tab v-for="(item, index) in tabItems" :title="item" :key="index">

                <div v-if="ydzt">
                    <div class="container" v-for="(item, index) in ydsj" :key="index" @click="djtzzj(item.id)">
                        <img :src="item?.cover" alt="" class="image">
                        <div class="text-container">
                            <div class="text-top">
                                {{ item?.title }}
                            </div>
                            <div class="text-bottom">
                                {{ item?.subtitle }}
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="ztzt">
                    <div class="zwm" v-for="(i, k) in ztsj" :key="k" @click="djzjml(i)">
                        <div class="mglz">
                            <div class="imgwb">
                                <img :src="i?.cover" alt="">
                                <div class="bottom-left-text">#专题</div>
                            </div>

                            <div class="xmtext">
                                <div class="top-text">
                                    <span>{{ i?.title }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="bdzt">
                    <div v-for="(item, index) in bdsj" :key="index" style="box-sizing: border-box;padding: 10px;"
                        @click="djbdlb(item)">
                        <div style="display: flex;margin: 10px 0;">
                            <div style="flex: 1; display: flex;">
                                <div style="flex: 1; text-align: left;">
                                    <span style="font-size: 16px;">{{ item?.title }}</span>
                                </div>
                                <div style="flex: 1; text-align: right;">
                                    <span style="font-size: 12px; color: #bebebe;">完整榜单></span>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; align-items: center;">
                            <img style="width: 100px; height: 100px;border-radius: 10px;object-fit: cover;object-position: center;"
                                :src="item?.img_url" alt="">
                            <div
                                style="height: 100%;width: calc(100% - 100px);; box-sizing: border-box; padding-left: 10px;">
                                <div
                                    style="flex: 1;font-size: 12px;color: #818181;display: flex;align-items: center;margin: 10px 0;">
                                    <div style="color: #d80000;">1.</div>{{ item.contents[0].title }}
                                </div>
                                <div
                                    style="flex: 1;font-size: 12px;color: #818181;display: flex;align-items: center;margin: 10px 0;">
                                    <div style="color: #fe8787;">2.</div>{{ item.contents[1].title }}
                                </div>
                                <div
                                    style="flex: 1;font-size: 12px;color: #818181;display: flex;align-items: center;margin: 10px 0;">
                                    <div style="color: #ffa100;">3.</div>{{ item.contents[2].title }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="wdzt">
                    <div class="container" v-for="(item, index) in wdsj" :key="index" @click="djtzhd(item)">
                        <img :src="item?.cover" alt="" class="image">
                        <div class="text-container">
                            <div class="text-top">
                                {{ item?.title }}
                            </div>
                            <div class="text-bottom">
                                {{ item?.subtitle }}
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="dtzt">
                    <div class="ydwm" @click="tzdt" v-for="(item, index) in dtsj" :key="index">
                        <div @click="djtzdt(item)">
                            <!-- 阅读 -->
                            <!-- <div class="yd">- 电台 -</div> -->
                            <img class="yd4 dtimgdt" :src="item?.cover" alt="">

                            <van-row justify="space-between" style="margin: 10px 0;">
                                <van-col span="12" class="dtimgwm">
                                    <img class="dtimg" :src="item?.author?.web_url" alt="">
                                    <div class="dtlmtext">{{ item?.author?.user_name }}</div>

                                </van-col>
                                <van-col span="12" class="ybicon">
                                    <div style="display: flex;">
                                        <!-- 爱心 -->
                                        <svg t="1676608723950" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="11545" width="16" height="16">
                                            <path
                                                d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                                                p-id="11546" fill="#bfbfbf"></path>
                                        </svg>

                                        <div style="font-size: 12px;color: #b2b2b2;">7407</div>
                                    </div>
                                    <svg t="1676608738205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="12587" width="16" height="16">
                                        <path
                                            d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"
                                            fill="#bfbfbf" p-id="12588"></path>
                                        <path
                                            d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"
                                            fill="#bfbfbf" p-id="12589"></path>
                                    </svg>
                                </van-col>
                            </van-row>
                        </div>
                    </div>
                </div>
                <!-- 小记 -->
                <div v-if="xjzt" class="tpdbzwc">
                    <div class="xjitem" v-for="(item, index) in xjsj" :key="index" @click="djtzxj(item)">
                        <div>
                            <img :src="item.img_url" alt="">
                        </div>
                        <div class="tpdbxm">
                            <div class="tpdbwz">{{ item.content }}</div>
                            <div class="tpdbwz2">{{ item.input_date.split(' ')[0] }}</div>
                            <div class="tpdbwz3">{{ item.user.user_name }}</div>
                        </div>
                    </div>
                </div>

                <div v-if="zzzt">
                    <h4 style="margin-left: 10px;">热门作者</h4>
                    <div v-for="(item, index) in zzsj" :key="index" @click="djzzxx(item)">
                        <div class="parent-box">
                            <div class="left-box">
                                <img :src="item?.web_url" alt="">
                            </div>
                            <div class="middle-box">
                                <div>{{ item.user_name }}</div>
                                <div>{{ item.desc }}</div>
                            </div>
                            <div class="right-box">
                                <div class="ybgz">关注</div>
                            </div>
                        </div>
                    </div>
                </div>

            </van-tab>
        </van-tabs>


        <van-tabbar v-model="active2">
            <van-tabbar-item @click="djtz('/home')" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item @click="djtz('/faxian')" icon="apps-o">发现</van-tabbar-item>
            <van-tabbar-item @click="djtz('/lianzai')" icon="coupon-o">连载</van-tabbar-item>
            <van-tabbar-item @click="djtz('/wode')" icon="contact">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import axios from '../plugins/axiosInstance';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const active = ref(0);
const router = useRouter()
const active2 = ref(1)
const tabItems = ref(["阅读", "图文", "专题", "热榜", "问答", "电台", "小记", "作者"])
// const tabItems = ref(["阅读", "图文", "专题"])

const djtzssym = () => {
    router.push('/sousuoyemian')
}


const ydsj = ref([])
const ztsj = ref([])
const bdsj = ref([])
const wdsj = ref([])
const dtsj = ref([])
const xjsj = ref([])
const zzsj = ref([])

// 状态
const ydzt = ref(true)
const ztzt = ref(true)
const bdzt = ref(true)
const wdzt = ref(true)
const dtzt = ref(true)
const xjzt = ref(true)
const zzzt = ref(true)

// 作者详细
const djzzxx = (item) => {
    localStorage.setItem('zuozheitem', JSON.stringify(item))
    router.push('/zuozhexx')
}

// 跳转小记
const djtzxj = (item) => {
    localStorage.setItem('xiaojiitem', JSON.stringify(item))
    router.push('/xiaoji')
}
// 进入榜单列表
const djbdlb = (item) => {
    localStorage.setItem('rebangitem', JSON.stringify(item))
    router.push('/rebang')
}
// 进入电台
const djtzdt = (item) => {
    console.log(item.id);
    localStorage.setItem('diantaiId', item.id)
    router.push('/diantai')
}
function djtz(url) {
    router.push(url)
}
// 第一个参数是id列表，第二个是index，这样点击就能获取应该得到的id了
const djtzzj = (id) => {
    console.log(id);
    localStorage.setItem('lzwzxxId', JSON.stringify(id))
    router.push('/lzwzxx')
}
// 问答
const djtzhd = (item) => {
    localStorage.setItem('wendaId', JSON.stringify(item.id))
    router.push('/wenda')
}
// 判断今天时间大于6点就返回今天的，如果小于6点就返回昨天的，因为6点前数据没更新
function Ifday() {
    const now = new Date();
    const hour = now.getHours();
    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);

    let dateStr = ''
    if (hour < 6) {
        dateStr = `${yesterday.getFullYear()}-${(yesterday.getMonth() + 1).toString().padStart(2, '0')}`;
    } else {
        dateStr = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}`;
    }
    return dateStr
}
// 点击连载进入章节目录 i是目录id
const djzjml = (i) => {
    localStorage.setItem('ztmlsj', JSON.stringify(i))
    router.push('/ztmulu')
}
const bhzh = (_, b) => {
    ydzt.value = false
    ztzt.value = false
    bdzt.value = false
    wdzt.value = false
    dtzt.value = false
    xjzt.value = false
    zzzt.value = false

    if (b == '阅读') {
        ydzt.value = true
        axios({
            url: `https://apis.netstart.cn/one/find/bymonth/1/${Ifday()}`,
            method: 'get'
        }).then((res) => {
            ydsj.value = res.data.data
        }).catch(() => { })
    }
    if (b == '图文') {
        localStorage.setItem('twdc', JSON.stringify(true))
        router.push('/home')
    }
    if (b == '专题') {
        ztzt.value = true
        axios({
            url: `https://apis.netstart.cn/one/banner/list/4`,
            method: 'get'
        }).then((res) => {
            ztsj.value = res.data.data
        }).catch(() => { })
    }
    if (b == '热榜') {
        bdzt.value = true
        axios({
            url: `https://apis.netstart.cn/one/find/rank`,
            method: 'get'
        }).then((res) => {
            bdsj.value = res.data.data
        }).catch(() => { })
    }
    if (b == '问答') {
        wdzt.value = true
        axios({
            url: `https://apis.netstart.cn/one/find/bymonth/3/${Ifday()}`,
            method: 'get'
        }).then((res) => {
            wdsj.value = res.data.data
            console.log(wdsj);
        }).catch(() => { })
    }
    if (b == '电台') {
        dtzt.value = true
        axios({
            url: `https://apis.netstart.cn/one/find/bymonth/8/${Ifday()}`,
            method: 'get'
        }).then((res) => {
            dtsj.value = res.data.data
            console.log(dtsj);
        }).catch(() => { })
    }
    console.log(b);
    if (b == '小记') {

        xjzt.value = true
        axios({
            url: `https://apis.netstart.cn/one/diary/square/more/0`,
            method: 'get'
        }).then((res) => {
            xjsj.value = res.data.data.list
            console.log(xjsj);
        }).catch(() => { })
    }
    if (b == '作者') {

        zzzt.value = true
        axios({
            url: `https://apis.netstart.cn/one/author/hot`,
            method: 'get'
        }).then((res) => {
            zzsj.value = res.data.data
            console.log(zzsj);
        }).catch(() => { })
    }
}
onMounted(() => {
    axios({
        url: `https://apis.netstart.cn/one/find/bymonth/1/${Ifday()}`,
        method: 'get'
    }).then((res) => {
        ydsj.value = res.data.data
    }).catch(() => { })
})
</script>

<style lang="less" scoped>
.tpdbzwc {
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;

    .xjitem {
        box-sizing: border-box;
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;

        img {
            width: 170px;
            height: 200px;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
        }

        .tpdbxm {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            border-radius: 0 0 10px 10px;
            box-sizing: border-box;
            padding: 10px;
            width: 100%;
            // height: 50px;
            // background-color: red;

            .tpdbwz {
                box-sizing: border-box;
                font-size: 14px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .tpdbwz2,
            .tpdbwz3 {
                color: #bdbdbd;
                font-size: 12px;
                box-sizing: border-box;
                padding-top: 5px;
            }

            .tpdbwz2 {
                padding-top: 20px;
            }
        }
    }

    .xjitem:nth-child(odd) {
        padding-right: 7px;
    }

    .xjitem:nth-child(even) {
        padding-left: 7px;
    }


}



.container {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
}

.image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 10px;
}

.text-container {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    width: calc(100% - 50px);
    height: 50px;
}

.text-top {
    height: 50%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
}

.text-bottom {
    width: 100%;
    height: 50%;
    color: #bebebe;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 25px;
}

.zwm {
    box-sizing: border-box;
    padding: 10px;

    .mglz {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);

        .imgwb {
            border-radius: 10px 10px 0 0;
            position: relative;
            height: 150px;
            width: 100%;
            display: flex;
            /* 设置容器为 flex 容器 */
            align-items: center;
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
            overflow: hidden;

            /* 隐藏超出容器范围的部分 */
            img {
                object-fit: cover;
                /* 按照容器宽高比例进行裁剪，尽可能覆盖整个容器 */
                width: 100%;
                /* 设置图片宽度为 100%，占满容器 */
                height: 100%;
                /* 设置图片高度为 100%，占满容器 */
            }

            .top-left-text {
                position: absolute;
                top: 10px;
                /* 距离顶部10px */
                left: 10px;
                /* 距离左边10px */
                font-size: 12px;
                /* 字体大小为12px */
                color: white;
            }

            .bottom-left-text {
                position: absolute;
                bottom: 10px;
                /* 距离底部10px */
                left: 10px;
                /* 距离左边10px */
                font-size: 12px;
                /* 字体大小为14px */
                color: white;
            }
        }
    }

    .xmtext {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        width: 100%;
        border-radius: 0 0 10px 10px;
        position: relative;


        .top-text {
            left: 10px;
            width: calc(100% - 10px);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .top-text {
            font-size: 14px;
        }


    }
}

.dbxzdj {
    width: 100%;
    height: 40px;
    background-color: #fbfbfb;
    text-align: center;
    line-height: 40px;
}

.zzc {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    position: absolute;
    z-index: 99999;

    img {
        width: 100%;
    }
}

.dtimgdt {
    height: 170px !important;
}

.hdcktext {
    font-size: 12px;
    height: 100px;
    width: 100%;
    color: #bdbdbd;
    background-color: #fcfcfc;
    text-align: center;
    line-height: 100px;
}

.dtimgwm {
    position: relative;
}

.dtimg {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    bottom: 0;
    left: 10px;
}

.dtlmtext {
    position: absolute;
    font-size: 14px;
    color: #a8a8a8;
    bottom: 0;
    left: 45px;
}

.ydwm {
    box-sizing: border-box;
    padding: 10px;
}

.yd {
    width: 100%;
    height: 20px;
    color: #b1b1b1;
    font-size: 12px;
    text-align: center;
    margin: 20px 0;
}

.yd2 {
    font-weight: 600;

}

.yd3 {
    color: #b1b1b1;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.dytext {
    font-size: 14px;
    color: #818181;
    margin-bottom: 20px;
}

.yd4 {
    width: 100%;
    border-radius: 10px;
}

.gdt {
    height: 10px;
    background-color: #f7f7f7;
    width: 100%;
}

.gdt2 {
    height: 5px;
}

.ybicon {
    display: flex;
    justify-content: space-evenly;
}

.dataitem {
    margin-bottom: 20px;
}

.dataitem:nth-child(even) {
    display: flex;
    justify-content: flex-end;
}

.image-box {
    border: 1px solid #ccc;
    /* 设置边框 */
    display: inline-block;

    /* 将盒子设置为行内块元素，以便于其他元素与之并排显示 */
    img {
        width: 153px;
        height: 88px;
    }
}

.date {
    padding: 10px 0;
    text-align: center;
    /* 将日期居中显示 */
}

// 淡入淡出动画
.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.zpwz {
    box-shadow: 0px 1px 5px 1px #d4d4d4;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 10px;

    img {
        width: 100%;
        border-radius: 10px 10px 0 0;
        margin-bottom: 20px;
    }
}

.jz {
    text-align: center;
    padding-bottom: 30px;
}

.flip {
    transform: rotateZ(180deg);
}

.top {
    box-sizing: border-box;
    padding: 5px;
}

.ybwzwm {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;


}

.ybwz {
    font-size: 12px;
    color: rgb(201, 201, 201);
}

.lzb {
    display: flex;
    align-items: flex-end;
}

.lt {
    font-weight: 600;
    margin-right: 5px;
    display: flex;
}

.rt {
    font-size: 12px;
    display: flex;
}

.parent-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
}

.left-box {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: relative;

    img {
        /* 需要设置相对定位 */
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        position: absolute;
        /* 需要设置绝对定位 */
        top: 0;
        left: 0;
        border-radius: 100%;
    }
}

.right-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    .ybgz {
        font-size: 12px;
        border: 1px solid black;
        border-radius: 20px;
        width: 50px;
        height: 20px;
        text-align: center;
        line-height: 20px;
    }
}

.middle-box {
    flex: 1;
    height: 50px;
    display: flex;
    flex-direction: column;
    width: 0;

    // overflow: hidden;
    div {
        flex: 1;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 10px;
    }

    div:nth-child(1) {
        font-size: 14px;
    }

    div:nth-child(2) {
        font-size: 12px;
        color: #c2c2c2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 5px;
    }
}

.sstbwz {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}
</style>